<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Information</title>

		<link rel="stylesheet" type="text/css" href="style/css.css">
		<script src="js/js.js"></script>
	</head>

	<body>
		<div class="top">
			<div class="top-1">
				<ul>
					<li>
						<a href="#">注册</a>
					</li>
					<li>
						<a href="#">登录</a>
					</li>
					<li>
						<a href="#">帮助</a>
					</li>
				</ul>
			</div>
			<div style="clear: both;"></div>
			<!--清除浮动-->
			<img src="images/logo.jpg" />
			<div class="top-2">
				<ul>
					<li>关于我们</li>
					<li>产品展示</li>
					<li>新闻中心</li>
					<li>人才招聘</li>
					<li>客户留言</li>
				</ul>
			</div>
			<div style="clear: both;"></div>
			<!--清除浮动-->
			<div class="top-3">
				<ul>
					<li>CEO致词</li>
					<li>公司历史</li>
					<li>企业文化</li>
					<li>组织结构</li>
					<li>合作伙伴</li>
				</ul>
			</div>
		</div>

		<div style="clear: both;"></div>
		<!--清除浮动-->

		<div class="guanggao">
			<img src="images/Information_ganggao.jpg" />
		</div>

		<div class="zhong">
			<div class="vip">
				<a> INFORMATION</a>
				<p>会员信息</p>
				<hr width="165px" size="5" style="margin: 0 auto; margin-top: 5px;background-color: #ccc;border: none;" />
				<ul>
					<li><img src="images/Information_xinxi.jpg" />
						<a style="color: #214C8F;">详情资料</a>
					</li>
					<hr width="165px" size="2" style="margin: 0 auto; margin-top: 5px;" />
					<li><img src="images/Information_xinxi.jpg" />
						<a>密码修改</a>
					</li>
					<hr width="165px" size="2" style="margin: 0 auto; margin-top: 5px;" />
					<li><img src="images/Information_xinxi.jpg" />
						<a>意见反馈</a>
					</li>
					<hr width="165px" size="2" style="margin: 0 auto; margin-top: 5px;" />
					<li><img src="images/Information_xinxi.jpg" />
						<a>查看留言</a>
					</li>
				</ul>
			</div>

			<div class="zilian">
				<div class="z-top">
					<ul class="left">
						<li>&nbsp;新闻中心</li>
					</ul>
					<ul class="r">
						<li>首页&nbsp;></li>
						<li>会员信息 &nbsp; > </li>
						<li>详细资料</li>

					</ul>
				</div>
				<form id="two">
					<div class="biao">

						<table border="0">
							<tr>
								<td rowspan="9" width="120px" id="one">
									<!--<div class="img_show img_show1">
									<img src="images/Information_touxiang.jpg" />
									  <input type="file" class="upfile" accept="*/*"style="font-size: 20px;border: none;width: 100px;">

								</div>-->
									<div id="preview">
										<img id="imghead" border="0" src="images/Information_touxiang.jpg" width="90" height="90" onClick="$('#previewImg').click();">

										<input type="file" onChange="previewImage(this)" style="font-size: 20px;border: none;width: 100px;" id="previewImg">
									</div>

								</td>
								<td width="120px" style="text-align: right;">姓名：</td>
								<td width="400px"><input type="text" name="user" size="20" /> <samp style="color: red;"></samp></td>
							</tr>
							<tr>
								<td style="text-align: right;">性别：</td>
								<td>
									<select>
										<option>男</option>
										<option>女</option>
									</select>
								</td>
							</tr>
							<tr>
								<td style="text-align: right;">职业：</td>
								<td><input type="text" name="zy" size="20" /><samp style="color: red;"></samp></td>
							</tr>
							<tr>
								<td style="text-align: right;">公司名：</td>
								<td><input type="text" name="gm" size="20" /> <samp style="color: red;"></samp></td>
							</tr>
							<tr>
								<td style="text-align: right;">公司地址：</td>
								<td><input type="text" name="gd" size="20" /> <samp style="color: red;"></samp></td>
							</tr>
							<tr>
								<td style="text-align: right;">电子邮箱:</td>
								<td><input type="text" name="emali" size="20" /><samp style="color: red;"></samp></td>
							</tr>
							<tr>
								<td style="text-align: right;">居住地：</td>
								<td><input type="text" name="dizi" size="20" /><samp style="color: red;"></samp></td>
							</tr>
							<tr>
								<td style="text-align: right;">个人介绍：</td>
								<td><textarea cols="25" rows="5" name="detail" id="content"></textarea><samp style="color: red;"></samp>
								</td>
							</tr>
							<tr>
								<td style="text-align: right;">&nbsp;</td>
								<td> <input type="submit" value="更新" class="one" /> </td>
							</tr>
						</table>
					</div>
				</form>
				<!--
                	作者：1352371565@qq.com
                	时间：2017-08-17
                	描述：js改jq
                -->
				<script>
					$(function() {
						$('#two').click(function() {
							var $n = this.elements["user"]
							var $n_sapm = $n.parentNode.getElementsByTagName("samp")[0]

							var $zy = this.elements["zy"]
							var $zy_sapm = $zy.parentNode.getElementsByTagName("samp")[0]

							var $gm = this.elements["gm"]
							var $gm_sapm = $gm.parentNode.getElementsByTagName("samp")[0]

							var $gd = this.elements["gd"]
							var $gd_sapm = $gd.parentNode.getElementsByTagName("samp")[0]

							var $e = this.elements["emali"]
							var $e_sapm = $e.parentNode.getElementsByTagName("samp")[0]

							var $dizi = this.elements["dizi"]
							var $dizi_sapm = $dizi.parentNode.getElementsByTagName("samp")[0]

							var $detail = this.elements["detail"]
							var $detail_sapm = $detail.parentNode.getElementsByTagName("samp")[0]
							$n_sapm.innerHTML = $zy_sapm.innerHTML = $gd_sapm.innerHTML = $gm_sapm.innerHTML = $e_sapm.innerHTML = $dizi_sapm.innerHTML = $detail_sapm.innerHTML = "  "
							if($n.value == "") {
								$n_sapm.innerHTML = " 输入名字!!"
								return false;
							}
							if($zy.value == "") {
								$zy_sapm.innerHTML = " 输入职业!!"
								return false;
							}
							if($gm.value == "") {
								$gm_sapm.innerHTML = " 输入公司名!!"
								return false;
							}
							if($gd.value == "") {
								$gd_sapm.innerHTML = " 输入公司地址!!"
								return false;
							}

							if($e.value == "") {
								$e_sapm.innerHTML = " 输入邮箱!!"
								return false;
							} else if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test($e.value)) {
								$e_sapm.innerHTML = "邮箱格式不对！"
								return false; // 阻止表单提交的操作
							}

							if($dizi.value == "") {
								$dizi_sapm.innerHTML = " 输入地址!!"
								return false;
							}
							if($detail.value == "") {
								$detail_sapm.innerHTML = " 输入个人介绍!!"
								return false;
							}

						});

					});
				</script>

				<!--头像上传功能-->
				<script>
					//图片上传预览    IE是用了滤镜。
					function previewImage(file) {
						var MAXWIDTH = 90;
						var MAXHEIGHT = 90;
						var div = document.getElementById('preview');
						if(file.files && file.files[0]) {
							//            div.innerHTML ='<img id=imghead onclick=$("#previewImg").click()>';//上传后删除按钮
							var img = document.getElementById('imghead');
							img.onload = function() {
								var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
								img.width = rect.width;
								img.height = rect.height;
								//                 img.style.marginLeft = rect.left+'px';
								img.style.marginTop = rect.top + 'px';
							}
							var reader = new FileReader();
							reader.onload = function(evt) {
								img.src = evt.target.result;
							}
							reader.readAsDataURL(file.files[0]);
						} else //兼容IE
						{
							var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
							file.select();
							var src = document.selection.createRange().text;
							div.innerHTML = '<img id=imghead>';
							var img = document.getElementById('imghead');
							img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
							var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
							status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height);
							div.innerHTML = "<div id=divhead style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;" + sFilter + src + "\"'></div>";
						}
					}

					function clacImgZoomParam(maxWidth, maxHeight, width, height) {
						var param = {
							top: 0,
							left: 0,
							width: width,
							height: height
						};
						if(width > maxWidth || height > maxHeight) {
							rateWidth = width / maxWidth;
							rateHeight = height / maxHeight;

							if(rateWidth > rateHeight) {
								param.width = maxWidth;
								param.height = Math.round(height / rateWidth);
							} else {
								param.width = Math.round(width / rateHeight);
								param.height = maxHeight;
							}
						}
						param.left = Math.round((maxWidth - param.width) / 2);
						param.top = Math.round((maxHeight - param.height) / 2);
						return param;
					}
				</script>

				<img src="images/Information_buzhid.jpg" />

			</div>
			<div style="clear: both;"></div>
			<!--清除浮动-->

			<div class="wei">
				<p>地址：广东省广州市海珠区新港西路231号3栋4层 联系人：乐 乐 移动电话：13588888888 固定电话：020-1234567 传 真：020-1234567 Copyright @ 2014 文豆网络科技有限公司 版权所有 粤ICP备0000000号</p>
				<select style="float: right;">
					<option>友情链接</option>
					<option>1</option>
					<option>2</option>

				</select>
			</div>

		</div>

	</body>

</html>